<template>
  <!-- 签约管理 * 待签约列表 -->
  <div>
      <div class="lhy_publish_top_One">
          <!-- 第一行 - 签约  -->
          <div style="border-bottom:1px dashed #efefef ;" class="lhy_One">
              <div class="display">
                  <b class="lhy_b">签约状态</b>
                  <el-select style="margin-right:15px; width: 170px; " v-model="value" class="m-2"
                      placeholder="请选择签约状态">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
              </div>
              <div class="display">
                  <b class="lhy_b">签约机构</b>
                  <el-select style="margin-right:15px; width: 170px; " v-model="value" class="m-2"
                      placeholder="请选择签约机构">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
              </div>
              <div class="display">
                  <b class="lhy_b">医生团队</b>
                  <el-select style="margin-right:15px; width: 170px; " v-model="value" class="m-2"
                      placeholder="请选择医生团队">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
              </div>
              <div class="display">
                  <b class="lhy_b">服务包</b>
                  <el-select style="margin-right:15px; width: 170px;" v-model="value" class="m-2"
                      placeholder="请选择服务包">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
              </div>
          </div>
          <!-- 第二行 - 选择日期 -->
          <div class="lhy_One">
              <b class="lhy_b">选择日期</b>
              <div class="display">
                  <el-select style="margin-right:15px; width: 430px;" v-model="value" class="m-2" placeholder="请选择时间">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
              </div>
              <div class="display">
                  <el-button type="primary">查询</el-button>
                  <el-button>导出</el-button>
              </div>
          </div>
          <el-table ref="multipleTableRef" :data="tableData.slice((pages-1)*pageSize,pages*pageSize)"
              style="width: 100%" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" />
              <el-table-column label="编号" width="120">
                  <template #default="scope">{{ scope.row.id }}</template>
              </el-table-column>
              <el-table-column property="name" label="签约人姓名" width="120" />
              <el-table-column property="IDnumber" label="身份证号" show-overflow-tooltip />
              <el-table-column property="name" label="手机号" width="120" />

              <el-table-column property="doctor" label="签约医生团队" width="120" />

              <el-table-column property="serve" label="签约服务包" width="120" />

              <el-table-column property="state" label="签约状态" width="120">
                  <template #default="scope">
                      <el-tag v-if="scope.row.state" type="success">已签约</el-tag>
                      <el-tag v-else type="danger">未签约</el-tag>
                  </template>
              </el-table-column>

              <el-table-column property="date" label="申请时间" width="120" />

              <el-table-column label="操作" width="120">
                  <a style="margin-right: 10px;">查询详情</a>
                  <a>编辑</a>
              </el-table-column>
          </el-table>
          <div style="margin-top: 15px;">
              <el-pagination @update:current-page="changePage" v-model:current-page="page" background :page-size="pageSize"
              layout="prev, pager, next" :total="tableData.length" />
          </div>
          


      </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { ElTable } from 'element-plus'



  const multipleTableRef = ref()
  const multipleSelection = ref([])

  const handleSelectionChange = (val) => {
      multipleSelection.value = val
  }
  // 定义总数据
  const tableData = [
      {
          id: '1',
          name: 'Tom111',
          IDnumber: '123456789987654321',
          mobile: "123456789123",
          doctor: "张三医生",
          serve: "老年人服务包",
          state: true,
          date: "2020-10-29",
      },
      {
          id: '2',
          name: 'Tom222',
          IDnumber: '123456789987654321',
          mobile: "123456789123",
          doctor: "张三医生",
          serve: "老年人服务包",
          state: true,
          date: "2020-10-29",
      },
      {
          id: '3',
          name: 'Tom333',
          IDnumber: '123456789987654321',
          mobile: "123456789123",
          doctor: "张三医生",
          serve: "老年人服务包",
          state: true,
          date: "2020-10-29",
      },
      {
          id: '4',
          name: 'Tom444',
          IDnumber: '123456789987654321',
          mobile: "123456789123",
          doctor: "张三医生",
          serve: "老年人服务包",
          state: true,
          date: "2020-10-29",
      },
      {
          id: '5',
          name: 'Tom555',
          IDnumber: '123456789987654321',
          mobile: "123456789123",
          doctor: "张三医生",
          serve: "老年人服务包",
          state: true,
          date: "2020-10-29",
      },
      {
          id: '6',
          name: 'Tom666',
          IDnumber: '123456789987654321',
          mobile: "123456789123",
          doctor: "张三医生",
          serve: "老年人服务包",
          state: true,
          date: "2020-10-29",
      },
      {
          id: '7',
          name: 'Tom777',
          IDnumber: '123456789987654321',
          mobile: "123456789123",
          doctor: "张三医生",
          serve: "老年人服务包",
          state: true,
          date: "2020-10-29",
      },
      {
          id: '8',
          name: 'Tom888',
          IDnumber: '123456789987654321',
          mobile: "123456789123",
          doctor: "张三医生",
          serve: "老年人服务包",
          state: true,
          date: "2020-10-29",
      },
      {
          id: '9',
          name: 'Tom999',
          IDnumber: '123456789987654321',
          mobile: "123456789123",
          doctor: "张三医生",
          serve: "老年人服务包",
          state: true,
          date: "2020-10-29",
      },
      {
          id: '10',
          name: 'Tom1010',
          IDnumber: '123456789987654321',
          mobile: "123456789123",
          doctor: "张三医生",
          serve: "老年人服务包",
          state: true,
          date: "2020-10-29",
      },
      {
          id: '11',
          name: 'Tom11111',
          IDnumber: '123456789987654321',
          mobile: "123456789123",
          doctor: "张三医生",
          serve: "老年人服务包",
          state: true,
          date: "2020-10-29",
      },
  ]

  // 当前页
  const pages = ref(1)
  // 每页显示条数
  const pageSize = 5
  // 更改页数
  let changePage = (page) => {
      console.log(page);
      pages.value = page
      console.log(pages);
  }


</script>

<style lang="scss" scoped>
  .display {
      display: inline-block;
  }

  /* 发布单位的最外层框 */
  .lhy_publish_top {
      margin-top: 6px;
      width: 100%;
      background-color: #f0f0f0;
      height: 75vh;
      z-index: 100;
      text-align: center;
  }

  /* 发布单位 - 发布单位行 */
  .lhy_publish_top_One {
      text-align: left;
      width: 95%;
      /* padding: 15px; */
      background-color: white;
      margin-top: 25px;
      display: inline-block;
  }

  .lhy_b {
      margin-right: 20px;
  }

  .span {
      padding: 5px 20px;
      font-weight: 550;
      color: #6e6e6e;

  }

  .lhy_One {
      padding: 18px 0;
      margin: 0 25px;
      overflow: hidden;
      text-overflow: ellipsis;
  }
</style>